<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormRules, UploadProps } from "element-plus";
import ReCol from "@/components/ReCol";
import { FormProps } from "./types";
import { usePublicHooks } from "@/views/hooks";
import feedback from "@/utils/feedback";
import httpConfig from "@/utils/http/httpConfig";
import { Plus } from "@element-plus/icons-vue";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    higherOptions: [], //状态其他数据,
    dictOptionData: {}, //字典数据
    id: null,
    skuList: []
  })
});

const ruleFormRef = ref();
const { switchStyle } = usePublicHooks();
const newFormInline = ref(props.formInline);
console.log("newFormInline", newFormInline);
//处理spec信息
newFormInline.value.skuList.forEach(p => {
  let attsStr = p.specValues;
  p.attrs = attsStr.substr(0, attsStr.indexOf("_")).split("-");
  p.price = Number(p.price) / 100;
});

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-table
    style="width: 100%; margin-top: 20px"
    :data="newFormInline.skuList"
    border
  >
    <el-table-column label="SKU名称" align="center">
      <template #default="scope">
        <div>{{ scope.row.name }}</div>
      </template>
    </el-table-column>
    <el-table-column label="编码" prop="skuSn" align="skuSn" />

    <el-table-column label="规格" align="center">
      <template #default="scope">
        {{ scope.row.attrs.join("|") }}
      </template>
    </el-table-column>
    <el-table-column label="销售价格" align="center">
      <template #default="scope">
        <el-input v-model="scope.row.price"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="商品库存" align="center">
      <template #default="scope">
        <el-input v-model="scope.row.stockNum"></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped></style>
